<template>
	<view class="container rent-seedDetail">
		<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="500">
			<swiper-item>
				<view class="swiper-item">
					<image class="banner-img" :src="$fileUrl+'土地.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="page-main">
			<view class="detail-title">种子简介</view>
			<view class="detail-box">
				<view class="detail-list">
					<view class="list-title">种子名称</view>
					<view class="list-info">西瓜</view>
				</view>
				<view class="detail-list">
					<view class="list-title">预估产量</view>
					<view class="list-info">20kg/m²</view>
				</view>
				<view class="detail-list">
					<view class="list-title">播种季节</view>
					<view class="list-info">2月6月</view>
				</view>
				<view class="detail-list">
					<view class="list-title">生长周期</view>
					<view class="list-info">100天</view>
				</view>
				<view class="detail-list">
					<view class="list-title">播种面积</view>
					<view class="list-info">10m²</view>
				</view>
				<view class="detail-list">
					<view class="list-title">采摘周期</view>
					<view class="list-info">2月6月</view>
				</view>
				<view class="detail-list">
					<view class="list-title">种子介绍</view>
					<view class="list-info">西瓜</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	const isLoading = ref(false)
	onMounted(async () => { })
</script>

<style lang="scss">
.rent-seedDetail{
	background-color: #fff;
	
	.swiper {
		height: 440rpx;
	}
	
	.banner-img {
		width: 100%;
	}
	.page-main{
		background-color: #fff;
		border-radius: 14rpx 14rpx 0 0;
		transform: translateY(-20rpx);
		padding: 30rpx 50rpx;
	}
	.detail-title{
		text-align: center;
		font-weight: bold;
		font-size: 34rpx;
		color: #232323;
	}
	.detail-box{
		margin-top: 20rpx;
	}
	.detail-list{
		display: flex;
		margin-bottom: 20rpx;
	}
	.list-title{
		font-size: 32rpx;
		color: #5B5B5B;
	}
	.list-info{
		font-size: 32rpx;
		color: #232323;
		margin-left: 30rpx;
		font-weight: bold;
	}
}


// <view class="page-main">
// 			<view class="detail-title">种子简介</view>
// 			<view class="detail-box">
// 				<view class="detail-list">
// 					<view class="list-title">种子名称</view>
// 					<view class="list-info">西瓜</view>
// 				</view>
</style>
